<template>
    <view class="container" :style="themeColor">
        <header-bar :config="config"></header-bar>
        <!--        <view class="header" v-if="otherData">
            <view class="item">
                <text class="item-name">期末应收(元)</text>
                <text class="item-price">¥{{ otherData.WjsTotal }}</text>
            </view>
            <view class="item">
                <text class="item-name">期初应收(元)</text>
                <text class="item-price">¥{{ otherData.TotalMoney }}</text>
            </view>
            <view class="item">
                <text class="item-name">本期增加(元)</text>
                <text class="item-price">¥{{ otherData.HjTotal }}</text>
            </view>
            <view class="item">
                <text class="item-name">本期减少(元)</text>
                <text class="item-price">¥{{ otherData.BdJsTotal }}</text>
            </view>
        </view> -->
        <view class="new-header" v-if="otherData">
            <view class="new-top">
                <view>
                    <view class="tip">账户余额(元)</view>
                    <view class="blane-bold">{{ otherData.Balance }}</view>
                </view>
                <view style="padding-left: 48rpx;">
                    <view class="tip">信用额度(元)</view>
                    <view class="blane-bold">{{ otherData.Credit }}</view>
                </view>
            </view>

            <view class="pricelist">
                <view>
                    <view class="name">期初应收(元)</view>
                    <view class="num">{{ otherData.TotalMoney }}</view>
                </view>
                <view>
                    <view class="name">本期增加(元)</view>
                    <view class="num">{{ otherData.HjTotal }}</view>
                </view>
                <view>
                    <view class="name">本期减少(元)</view>
                    <view class="num">{{ otherData.BdJsTotal }}</view>
                </view>
            </view>

        </view>
        <view class="main">
            <view class="card-cell time">
                <text class="btn-time" @click="openStarDate">{{
                    param.startDate == "" ? "开始时间" : param.startDate
                    }}</text>

                <text>至</text>
                <text class="btn-time" @click="openEndDate">{{
                    param.endDate == "" ? "结束时间" : param.endDate
                    }}</text>
                <text class="btn btn-yellow" @click="refresh">搜索</text>
            </view>
            <view class="items">
                <mescroll-uni v-show="load" @init="mescrollInit" :height="listHeight" :down="downOption" @down="refresh"
                    :up="upOption" @up="getData">
                    <!-- 数据列表 -->
                    <reconcilia-item v-for="(item, index) in datas" :data="item" :key="index"></reconcilia-item>
                </mescroll-uni>
            </view>
        </view>
        <uni-calendar :date="param.startDate" ref="startTime" :insert="false" @confirm="confirmStarDate"></uni-calendar>
        <uni-calendar :date="param.endDate" ref="endTime" :insert="false" @confirm="confirmEndDate"></uni-calendar>
    </view>
</template>

<script>
import reconciliaItem from "@/pages_me/components/reconcilia/reconcilia-item.vue"
import { getAccountList, GetAccountListNew, GetAccountModelNew } from "@/service/api/order.js"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import utilsOld from "@/utils/utilsOld.js"
import storage from "@/uni-sub-base/utils/storage.js"
export default {
    components: {
        reconciliaItem,
    },
    data() {
        return {
            config: {
                title: "对账单",
                back: true,
                color: ["#ffffff"],
                centerSlot: true,
                barPlaceholder: true,
            },
            listHeight: 0,
            otherData: null,
            load: false,
            datas: [],
            param: {
                pageNumber: 0,
                pageSize: 0,
                searchKey: "",
                startDate: utilsOld.thisMonth().startDate,
                endDate: utilsOld.thisMonth().endDate,
            },
            userInfo: {}
        }
    },
    created() {
        this.config.backgroundColor = [1, this.getThemeColor]
        this.userInfo = storage.getCache("userInfo")
    },
    mounted() {
        this.getListHeight()
        this.param.startDate = utilsOld.thisMonth().startDate
        this.param.endDate = utilsOld.thisMonth().endDate;
        this.GetAccountList()
    },
    methods: {
        getListHeight(element) {
            getElementHeight(this, ".items", (e) => {
                let bottomBarHeight = e
                //再获取列表高度
                this.listHeight = e + "px"
                this.load = true
                //#ifndef MP
                this.refresh()
                //#endif
            })
        },
        GetAccountList() {
            uni.showLoading({
                title: "加载中",
            })
            let param = {
                startDate: this.param.startDate,
                endDate: this.param.endDate,
                bCodeArr: [this.userInfo.CardNumber]
            }
            // let param = '?startDate='+this.param.startDate+'&endDate='+this.param.endDate+'&bCodeArr='+[this.userInfo.CardNumber]
            GetAccountListNew(param).then((res) => {
                if (res.State && res.Data) {
                    this.otherData = res.Data
                    uni.hideLoading()
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        getData(page) {
            let param = this.param
            param.bCodeArr = [this.userInfo.CardNumber]
            param.pageSize = page.size
            param.pageNumber = page.num

            GetAccountModelNew(param).then((res) => {
                if (res.State && res.Data) {
                    this.mescroll.endBySize(res.Data.length, res.RecordAmout)
                    this.datas = this.datas.concat(res.Data)
                }
            })
        },
        refresh() {
            this.GetAccountList()
            this.datas = []
            this.mescroll.resetUpScroll()
        },
        openStarDate() {
            //打开选择开始日期
            this.$refs.startTime.open()
        },
        confirmStarDate(e) {
            //选择开始日期
            this.param.startDate = e.fulldate
        },
        openEndDate() {
            //打开选择结束日期
            this.$refs.endTime.open()
        },
        confirmEndDate(e) {
            //选择结束日期
            this.param.endDate = e.fulldate
        },
    },
}
</script>

<style lang="scss">
.new-header {
    color: #fff;
    background: $app-color-main;
    padding: 0 $app-page-padding*2;
    padding-bottom: 64rpx;

    .new-top {
        display: flex;
        justify-content: flex-start;

        &>view {
            width: 50%;
        }
    }

    .tip {
        font-size: 28rpx;
        padding: 32rpx 0 20rpx 0;
    }

    .blane-bold {
        font-size: 52rpx;
        font-weight: bold;
        padding-bottom: 32rpx;
    }

    .pricelist {
        display: flex;
        justify-content: space-around;
        height: 140rpx;
        margin: 0 -24rpx;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 16rpx;

        &>view {
            display: flex;
            flex-direction: column;

            .name {
                font-size: 24rpx;
                padding: 24rpx 0 12rpx 0
            }

            .num {
                font-size: 34rpx;
                font-weight: bold;
                padding: 12rpx 0 0rpx 0
            }
        }
    }
}

.header {
    height: 360rpx;
    display: flex;
    flex-direction: row;
    background: $app-color-main;
    padding: $app-page-padding;

    flex-wrap: wrap;
    justify-content: space-between;
    flex: 1;

    .item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: calc(50% - 2px);
        border: solid 1rpx $transparent;
        padding: $app-page-padding 0;

        &:first-child {
            border-right: solid 1px rgba($color-white, 0.2);
            border-bottom: solid 1px rgba($color-white, 0.2);
        }

        &:nth-child(2) {
            border-bottom: solid 1px rgba($color-white, 0.2);
        }

        &:nth-child(3) {
            border-right: solid 1px rgba($color-white, 0.2);
        }

        text {
            color: $color-white;
        }

        .item-name {
            font-size: $font-size-28;
            margin-bottom: 20rpx;
        }

        .item-price {
            font-weight: 700;
            font-size: $font-size-36;
        }
    }
}

.header::after {
    content: " ";
    width: 50%; //这个宽度和子元素宽度一致
    height: 0;
    display: block;
}

.main {
    padding: $app-page-padding;
    background: $uni-bg-color-grey;
    border-radius: 40rpx 40rpx 0 0;
    height: 800rpx;
    margin-top: -40rpx;

    .card-cell {
        background: $color-white;
    }

    .time {
        .btn-time {
            display: flex;
            flex: 1;
            justify-content: center;
        }
    }
}
</style>
